import React from 'react'
import {Table,Row,Col} from 'react-bootstrap'
import * as Rx from 'rxjs-es/Rx';


class List extends React.Component{
    constructor(props){
        super(props)
        this.state={
            selectAll:false,
            list:[{id:1,first:'Mark1',last:'Otto',name:'@mdo',selected:false},{id:2,first:'Mark2',last:'Otto',name:'@mdo',selected:false},{id:3,first:'Mark3',last:'Otto',name:'@mdo',selected:false}],
            edit:null,
            item:{first:'',last:'',name:''}
        }
    }
    handleChange(field,event){



        const item = Object.assign({},this.state.item,{[field]:event.target.value})
        this.setState({item:item})
    }
    handleSubmitEdit(){
        const list = this.state.list.map(item=>{
            if(item.id==this.state.edit){
                return Object.assign({},item,this.state.item)
            }else
                return item
        })
        this.setState({list:list,edit:null,selectAll:false})
    }
    handleEditItem(id){


        this.state.list.forEach((item)=>{
            if(item.id==id){
                const _item=Object.assign({},item,{first:item.first,last:item.last,name:item.name})
                this.setState({item:_item})
            }
        })

        this.setState({edit:id})
        this.selectAll(false)
    }
    handleCancleEdit(){
        this.selectAll(false)
        this.setState({edit:null})
    }

    handleCheckAll(event){
        this.selectAll(event.target.checked)
        this.setState({edit:null})
    }
    handleCheck(id,event){

        const check=event.target.checked
        const list = this.state.list.map(item=>{
            if(id==null){
                item.selected=!check
                return item
            }
            if(item.id==id){
                item.selected=check
            }
            return item
        })
        this.setState({list:list})

    }
    selectAll(check){
        const list  = this.state.list.map(item=>{
            return Object.assign({},item,{selected:check})
        })
        this.setState({selectAll:check,list:list})
    }
    componentDidMount(){
        Rx.Observable.of('test')
            .map(data=>data+' hello world')
            .subscribe(data=>console.log(data))

        Rx.Observable.range(30,4)
            .subscribe(data=>console.log(data))

    }

    renderListBody(){
        const edit=this.state.edit
        const list=this.state.list
        if(list.length==0) return (<tr cols="4" style={{textAlign:'center'}}>暂无数据</tr>)
        if(edit==null){
            return this.state.list.map(item=>{
                return (
                    <tr key={item.id} onDoubleClick={this.handleEditItem.bind(this,item.id)}>
                        <td><input type="checkbox" value={item.id} checked={item.selected} onChange={this.handleCheck.bind(this,item.id)}/></td>
                        <td>{item.first}</td>
                        <td>{item.last}</td>
                        <td>{item.name}</td>
                        <td style={{textAlign:'center'}}>
                            <button type="button" className="btn btn-default" style={{marginRight:'10px'}} onClick={this.handleEditItem.bind(this,item.id)}>
                                <span className="glyphicon glyphicon-edit" ></span>
                            </button>
                            <button type="button" className="btn btn-default ">
                                <span className="glyphicon glyphicon-remove" ></span>
                            </button>
                        </td>
                    </tr>
                )
            })
        }else{
            return this.state.list.map((item,index)=>{
                if(item.id==edit){
                return (
                    <tr key={item.id}>
                        <td><input type="checkbox" value={item.id} checked={item.selected} onChange={this.handleCheck.bind(this,item.id)}/></td>
                        <td><input type="text" value={this.state.item.first} onChange={this.handleChange.bind(this,'first')}/></td>
                        <td><input type="text" value={this.state.item.last} onChange={this.handleChange.bind(this,'last')}/></td>
                        <td><input type="text" value={this.state.item.name} onChange={this.handleChange.bind(this,'name')}/></td>
                        <td style={{textAlign:'center'}}>
                            <button type="button" className="btn btn-success" style={{marginRight:'10px'}} onClick={this.handleSubmitEdit.bind(this)}>
                                <span className="glyphicon glyphicon-ok" style={{color:'rgb(240,240,240)'}} ></span>
                            </button>
                            <button type="button" className="btn btn-default " style={{color:'rgb(244,125,0)'}} onClick={this.handleCancleEdit.bind(this)}>
                                <span className="glyphicon glyphicon-ban-circle" ></span>
                            </button>
                        </td>
                    </tr>
                )
                }
                else return (
                <tr key={item.id} onDoubleClick={this.handleEditItem.bind(this,item.id)}>
                    <td><input type="checkbox" value={item.id} checked={item.selected} onChange={this.handleCheck.bind(this,item.id)} /></td>
                    <td>{item.first}</td>
                    <td>{item.last}</td>
                    <td>{item.name}</td>
                    <td style={{textAlign:'center'}}>
                        <button type="button" className="btn btn-default" onClick={()=>{this.setState({edit:item.id})}} style={{marginRight:'10px'}}>
                            <span className="glyphicon glyphicon-edit" ></span>
                        </button>
                        <button type="button" className="btn btn-default ">
                            <span className="glyphicon glyphicon-remove" ></span>
                        </button>
                    </td>
                </tr>
                )
            })
        }
    }
    render(){
        const deleteButton=(
            <button type="button" className="btn btn-default ">
                <span className="glyphicon glyphicon-remove" ></span>
            </button>
        )
        const deleteAll = this.state.selectAll==true?deleteButton:''
        const element = (
            <div>
              <Row>
                  <Col md={12} >
                      <div style={{marginBottom:'10px',padding:'20px',border:'1px solid rgb(220,220,220)'}}>
                          <button type="button" className="btn btn-default" style={{marginRight:'10px'}}>
                              <input type="checkbox"  checked={this.state.selectAll} onChange={this.handleCheckAll.bind(this)}/>全选
                          </button>
                          {deleteAll}
                      </div>
                  </Col>
              </Row>

            <Table striped bordered  hover>
                <thead>
                <tr>
                    <th style={{width:'10%'}}>#</th>
                    <th style={{width:'20%'}}>First Name</th>
                    <th style={{width:'20%'}}>Last Name</th>
                    <th style={{width:'20%'}}>Username</th>
                    <th style={{width:'20%'}}>action</th>
                </tr>
                </thead>
                <tbody>
                {this.renderListBody()}
                </tbody>
            </Table>
            </div>
        )
        return element
    }

}
export default List